<template>
  <div class="case-detail">
    <!-- <div class="process">
      <el-row>
        <el-col :span="24">
          <el-steps :active="processActive" align-center finish-status="success">
            <el-step v-for="(value, index) in processList" :title="value" :key="index"></el-step>
          </el-steps>
        </el-col>
      </el-row>
    </div> -->
    <casedetail :readonly="false" ref="casedetail" @tabclick="tabclick">
      <el-button slot="btns" type="primary" size="mini" @click="submitExamine">{{operate}}</el-button>
      <div class="cust-panel" slot="cust-panel">
        <doc-info ref="doc" v-show="activeName=='doc-info'"/>
        <approval-info
          v-show="activeName=='approval-info'"
          ref="approval"
          :submit="submitExamine"
          :reject="taskReject"
        />
      </div>
    </casedetail>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapState } from "vuex";
import FormBtns from "@/views/comps/zhzf/form-btns";
import dictCache from "@/assets/utils/cache-dict-util";
import baseInfo from "@/views/case/detail/base";
import caseApi from "@/api/system/case";
import litigantInfo from "@/views/case/detail/litigant";
import breakInfo from "@/views/case/detail/break";
import approvalInfo from "@/views/case/detail/approval";
import roadInfo from "@/views/case/detail/road";
import docInfo from "@/views/case/detail/doc";
import deptApi from "@/api/system/dept";
import discretionApi from "@/api/system/discretion";
import utils from "@/assets/utils/zhzf-util";
import workflowApi from "@/api/system/workflow";
import docApi from "@/api/system/doc";
import casedetail from "@/views/case/detail/casedetail";
import userinfo from "@/views/system/user/index";
export default {
  data() {
    return {
      tabs: [],
      // processList: ["案件登记", "案件审批", "案件办理", "行政处罚", "案件结案"],
      // processActive: 0,
      dialogVisible: false,
      documents: [],
      current_link: null,
      next_link: null,
      detatilUrl: null,
      loading: false,
      detail: {},
      caseDetail: {},
      tabindex: 5,
      activeName:'',
      operate:'提 交'
    };
  },
  components: {
    FormBtns,
    baseInfo,
    litigantInfo,
    breakInfo,
    roadInfo,
    docInfo,
    approvalInfo,
    casedetail
  },
  mounted() {
    let detail = this.$route.params.row.caseAccess;
    detail.workNodeId = this.$route.params.row.id;
    this.initPage(detail);
  },
  methods: {
    ...mapActions("d2admin/page", ["close"]),
    cancle() {
      this.close({ tagName: this.$route.path });
    },
    async initPage(detail) {
      let processName="";
      processName = this.$route.params.row.name
      if(processName == "案件结案"){
        this.operate = "结案";
      }
      // for(let i = 0; i < this.processList.length; i++){
      //   if(processName == this.processList[i]){
      //     this.processActive = i;
      //   }
      // }
      this.$refs.casedetail.initPage(detail);
      this.detail = this.$refs.casedetail.getDetail();
      await this.getDocument();
      if (processName == "案件审批") {
        this.$refs.casedetail.addtab({ label: "审批意见", name: "approval-info" });
      } 
      if(this.documents.length){
        this.$refs.casedetail.addtab({ label: "案件文书", name: "doc-info" });
      }
      this.activeName = this.documents.length ? "doc-info" : "approval-info";
      this.$refs.casedetail.activeName = this.activeName;
      this.$nextTick(()=>{
        if(this.documents){
          this.$refs.doc.initPage(this.detail);
        }
      })
    },
    async getDocument() {
      this.documents=[];
      //获取动态表单重定义的文书名称
      let resp = await workflowApi.taskStartForm({
        id: this.detail.workNodeId
      });
      if (resp) {
        let data = resp.data;
        for (let i = 0; i < data.length; i++) {
          if (data[i].id == "current_link") {
            this.current_link = data[i].name; //当前环节
          } else if (data[i].id == "next_link") {
            this.next_link = data[i].name; //下一环节
          } else {
            this.documents.push(data[i].name);
          }
        }
      }
    },
    tabclick(tab) {
      this.activeName = tab.name;
      if(this.activeName == 'doc-info'){
      this.$refs.doc.initPage();
      }
    },
    loadChildPage() {
      if (!this.$refs[this.activeName]) {
        return;
      }
      this.$refs[this.activeName].initPage(this.detail, this.distData);
    },
    handleClick(tab, event) {
      this.loadChildPage();
    },
    async submitData() {
      this.loading = true;
      let method = this.detail.caseAccessId ? caseApi.mod : caseApi.add;
      await method(this.detail);
      this.loading = false;
      this.close({ tagName: this.$route.path });
      this.$emit("submit");
    },
    async taskReject(approvalInfo) {
      //任务驳回
      let executeContent = "";
      if (this.processFlag) {
        executeContent = approvalInfo;
      }
      let resp = await caseApi.caseExamine({
        taskId: this.$route.params.row.id,
        commentMessage: executeContent,
        commentType: "",
        vars: {
          flag: false
        }
      });
      if (resp) {
        let ok = resp.ok;
        utils.showTips(resp.ok?"驳回成功":"驳回失败", ok);
        this.close({ tagName: this.$route.path });
      }
    },
    async submitExamine(approvalInfo) {
      //提交审核
      let param = {};
      let documents = this.$refs.doc.documents;
      if(documents.length>0){
        for(let i = 0; i < documents.length; i++){
          if(documents[i].status == "已完成"){
            param[documents[i].key] = "111"
          }
        }
      }
      let executeContent = "";
      if (this.processFlag) {
        executeContent = approvalInfo;
      }
      param['flag'] = true;
      param['current_link'] = this.current_link;
      let resp = await caseApi.caseExamine({
        taskId: this.$route.params.row.id,
        commentMessage: executeContent,
        commentType: "",
        vars: param
      });
      if (resp) {
        let ok = resp.ok;
        utils.showTips(resp.ok?"提交成功":"提交失败", ok);
        this.close({ tagName: this.$route.path });
      }
    }
  }
};
</script>

<style lang="scss">
.case-detail {
  background: #fff;
  position: relative;
  // padding:20px 10px;
  padding:0 !important;
  border:0 !important;
  .process {
    padding: 30px;
    .el-steps {
      .el-step__head.is-process {
        color: #409EFF;
        border-color: #409EFF;
      }
      .el-step__title.is-process{
        color: #409EFF;
      }
    }
  }
  .case-body {
    position: relative;
    .submit {
      position: absolute;
      top: -30px;
      right: 30px;
      letter-spacing: 5px;
      font-size: 14px;
    }
    .el-form {
      .el-form-item__label {
        width: 120px !important;
      }
      .el-form-item__content {
        margin-left: 120px !important;
      }
    }
  }
  .el-row {
    .el-tabs__nav {
      .is-active {
        color: #000 !important;
      }
    }
  }
}
.documents {
  position: absolute;
  left: 0;
  top: 290px;
  background-color: #f5f5f5;
  .title {
    padding: 0 20px;
    background: transparent;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      padding: 10px 20px;
      font-size: 16px;
    }
    li:hover {
      background-color: #95c4ec;
      cursor: pointer;
    }
  }
  .active {
    background-color: #95c4ec;
  }
}
.docList {
  position: fixed;
  right: 30px;
  top: 35%;
  padding: 20px 15px;
  background-color: #f5f5f5;
  // line-height:80px;
  .el-steps {
    .step-item {
      cursor: pointer;
      .el-step__title {
        font-size: 15px !important;
        color: #808080;
      }
      .is-process {
        color: #1da949;
        .el-step__icon {
          border-color: #1da949;
        }
      }
    }
  }
}
</style>